<link href="keyboards_layout.css" rel="stylesheet" />
<div id="keyboard">
    <div class="row">
        <div class="col">
            <div class="row mac-fkeys">
                <button data-key="ESCAPE">Esc</button>
                <button data-key="F1">F1</button>
                <button data-key="F2">F2</button>
                <button data-key="F3">F3</button>
                <button data-key="F4">F4</button>
                <button data-key="F5">F5</button>
                <button data-key="F6">F6</button>
                <button data-key="F7">F7</button>
                <button data-key="F8">F8</button>
                <button data-key="F9">F9</button>
                <button data-key="F10">F10</button>
                <button data-key="F11">F11</button>
                <button data-key="F12">F12</button>
                <button data-key="EJECT" style="width: 63px">Eject</button>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="spacer-small"></div>
                <button data-key="F13">F13</button>
                <button data-key="F14">F14</button>
                <button data-key="F15">F15</button>
                <div class="spacer-small"></div>
                <button data-key="F16">F16</button>
                <button data-key="F17">F17</button>
                <button data-key="F18">F18</button>
                <button data-key="F19">F19</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="spacer-small"></div>
    </div>
    <div class="row">
        <button data-key="ACCENT_GRAVE">`</button>
        <button data-key="ONE">1</button>
        <button data-key="TWO">2</button>
        <button data-key="THREE">3</button>
        <button data-key="FOUR">4</button>
        <button data-key="FIVE">5</button>
        <button data-key="SIX">6</button>
        <button data-key="SEVEN">7</button>
        <button data-key="EIGHT">8</button>
        <button data-key="NINE">9</button>
        <button data-key="ZERO">0</button>
        <button data-key="MINUS">-</button>
        <button data-key="EQUAL">=</button>
        <button data-key="BACKSPACE" style="width: 102px">&larr;</button>
        <div class="spacer-small"></div>
        <button data-key="FN_KEY">fn</button>
        <button data-key="HOME">&#8598;</button>
        <button data-key="PAGE_UP">&#8593;</button>
        <div class="spacer-small"></div>
        <button data-key="CLEAR">Clear</button>
        <button data-key="NUMPAD_EQUAL">=</button>
        <button data-key="NUMPAD_SLASH">/</button>
        <button data-key="NUMPAD_ASTERISK">*</button>
    </div>
    <div class="row">
        <button data-key="TAB" style="width: 72px">&#8677;</button>
        <button data-key="Q">Q</button>
        <button data-key="W">W</button>
        <button data-key="E">E</button>
        <button data-key="R">R</button>
        <button data-key="T">T</button>
        <button data-key="Y">Y</button>
        <button data-key="U">U</button>
        <button data-key="I">I</button>
        <button data-key="O">O</button>
        <button data-key="P">P</button>
        <button data-key="LEFT_BRACKET">[</button>
        <button data-key="RIGHT_BRACKET">]</button>
        <button data-key="BACKSLASH" style="width: 82px">\</button>
        <div class="spacer-small"></div>
        <button data-key="DELETE">Delete</button>
        <button data-key="END">&#8600;</button>
        <button data-key="PAGE_DOWN">&#8595;</button>
        <div class="spacer-small"></div>
        <button data-key="NUMPAD_SEVEN">7</button>
        <button data-key="NUMPAD_EIGHT">8</button>
        <button data-key="NUMPAD_NINE">9</button>
        <button data-key="NUMPAD_MINUS">-</button>
    </div>
    <div class="row">
        <button data-key="CAPSLOCK" style="width: 88px">&#8682;</button>
        <button data-key="A">A</button>
        <button data-key="S">S</button>
        <button data-key="D">D</button>
        <button data-key="F">F</button>
        <button data-key="G">G</button>
        <button data-key="H">H</button>
        <button data-key="J">J</button>
        <button data-key="K">K</button>
        <button data-key="L">L</button>
        <button data-key="SEMICOLON">;</button>
        <button data-key="SINGLE_QUOTE">'</button>
        <button data-key="ENTER" style="width: 121px">&crarr;</button>
        <div class="spacer-small"></div>
        <div class="spacer-key"></div>
        <div class="spacer-key"></div>
        <div class="spacer-key"></div>
        <div class="spacer-small"></div>
        <button data-key="NUMPAD_FOUR">4</button>
        <button data-key="NUMPAD_FIVE">5</button>
        <button data-key="NUMPAD_SIX">6</button>
        <button data-key="NUMPAD_PLUS">+</button>
    </div>
    <div class="row">
        <div class="col">
            <div class="row">
                <button data-key="SHIFT" style="width: 126px">&#8679;</button>
                <button data-key="Z">Z</button>
                <button data-key="X">X</button>
                <button data-key="C">C</button>
                <button data-key="V">V</button>
                <button data-key="B">B</button>
                <button data-key="N">N</button>
                <button data-key="M">M</button>
                <button data-key="COMMA">,</button>
                <button data-key="PERIOD">.</button>
                <button data-key="SLASH">/</button>
                <button data-key="SHIFT" style="width: 138px">&#8679;</button>
                <div class="spacer-small"></div>
                <div class="spacer-key"></div>
                <button data-key="UP_ARROW">&uarr;</button>
                <div class="spacer-key"></div>
                <div class="spacer-small"></div>
                <button data-key="NUMPAD_ONE">1</button>
                <button data-key="NUMPAD_TWO">2</button>
                <button data-key="NUMPAD_THREE">3</button>
            </div>
            <div class="row">
                <button data-key="CONTROL" style="width: 82px">Ctrl</button>
                <button data-key="ALT" style="width: 66px">Alt</button>
                <button data-key="COMMAND" style="width: 82px">&#8984;</button>
                <button data-key="SPACE" style="width: 327px">Space</button>
                <button data-key="COMMAND" style="width: 86px">&#8984;</button>
                <button data-key="ALT" style="width: 70px">Alt</button>
                <button data-key="CONTROL" style="width: 86px">Ctrl</button>
                <div class="spacer-small"></div>
                <button data-key="LEFT_ARROW">&larr;</button>
                <button data-key="DOWN_ARROW">&darr;</button>
                <button data-key="RIGHT_ARROW">&rarr;</button>
                <div class="spacer-small"></div>
                <button data-key="NUMPAD_ZERO" class="wide">0</button>
                <button data-key="NUMPAD_PERIOD">.</button>
            </div>
        </div>
        <div class="col">
            <button data-key="NUMPAD_ENTER" class="high">&crarr;</button>
        </div>
    </div>
</div>
